define(function(require, exports, module){
    var $      = require( '$' ),
    Vue        = require( 'vue' ),
    searchList = function( param ){
        var _this = this;
        if( !Object.assign ){
            alert('您的浏览器可能不支持vue库!');return;
        }else if( !param.el || !param.url || !param.structure ){
            alert( 'el,url,structure参数都是必填项!' );return;
        }
        
        if( !(this instanceof arguments.callee) ){
            return new arguments.callee( param );
        }
        param.type = param.type||'get';
        param.keyword = param.keyword||'keyword';
        param.fieldName = param.fieldName||'name';

        this.options = param;
        
        return new this.component({
            el: param.el,
            replace: false,
            data: {
                params: param,
                cache: {keyword:'',data:[]} // 本来是想做一个list类型的，但防止数据量过大内存溢出，就存储一个关键词吧
                
            },
            ready: function(){
                //this.$nextTick();
                this.$watch('keyword', function(){
                    this.computeListCount( );
                })
                
                document.body.addEventListener('click', function(ev){
                    this.listStatus = false;
                }.bind(this), false);
                
                typeof this.params.render === 'function' && this.params.render.apply( this.$els.root, [this.$els.root] );
                
            },
            methods: {
                change: function(idx, curData){
                    this.checkVal = this.keyword = typeof curData==='string' ? curData : curData[ this.params.fieldName ];
                    typeof this.params.change==='function' && this.params.change.apply( this, [].splice.call(arguments, 0) );
                    this.listStatus = false;
                }
                
            }
        })
        
    };
    
    searchList.prototype.component = Vue.extend({
            template: '<span class="v-searchList" @click.stop="" v-el:root>\
            <input type="text" v-model="checkVal" @focus="openSearch" v-if="params.strict" readonly="readonly">\
            <input type="text" v-model="keyword" @keyup.13="search" v-if="!params.strict" placeholder="请输入关键词">\
            <button @click="search" v-if="!params.strict" v-html="searchBtnText"></button>\
            <select-list v-ref:result-list v-show="listStatus" :params="params" :grid="grid" :change="change" :kw="keyword"><div slot="strict" class="strict" v-if="params.strict"><input type="text" v-model="keyword" @keyup.13="search" placeholder="请输入关键词"></div></select-list></span>',
            data: function(){
                return {
                    searchBtnText: '搜索', // 搜索按钮文案
                    keyword: '', // 
                    listStatus: false, // 
                    grid: [] // 
                }
            },
            methods: {
                search: function(){
                    var param = this.params, req = {};
                    // 性能优化，如果此关键词已经有了，就不用请求后端了
                    if( this.cache.keyword.trim() && this.keyword.indexOf( this.cache.keyword )>-1 ){
                        //this.grid = this.cache.data;
                        this.listStatus = true;
                        this.computeListCount( );
                        return;
                    }
                    req[ param.keyword ] = this.keyword;
                    $[ param.type ](param.url, req, function( res ){
                        if( res.success==undefined&&res.isSuccess==undefined&&res.hasError==undefined ){
                            alert( '后端返回的数据格式不对!\n例如:{data:[{"name":"张三","value":"zhangsan"}],success:true}' );
                        }
                        if( res.success==true||res.isSuccess==true||res.hasError==false ){
                            this.grid = eval( '( res.'+ this.params.structure +')' );
                            if( this.grid.length ){
                                this.listStatus = true;
                                this.cache.keyword = req[ param.keyword ];
                                this.cache.data = this.grid;
                            }
                            
                            this.computeListCount( this.grid.length );
                        }
                    }.bind(this),'JSON')
                },
                openSearch: function(){
                    this.listStatus = true;
                },
                computeListCount: function( count ){
                    
                    // 性能优化，如果传count了就不用去查找dom结构了
                    if( !isNaN( count ) ){
                        this.$refs.resultList.totalCount = count;
                        return;
                    }
                    setTimeout(function(){
                        this.$refs.resultList.totalCount = this.$els.root.querySelectorAll('ol li').length || 0;
                    }.bind(this), 30);
                    
                }
            },
            components: {
                "selectList": {
                    props: {
                        params: {},
                        grid: {
                            type: Array
                        },
                        change: {
                            type: Function
                        },
                        kw: {
                            type: String
                        }
                    },
                    data: function(){
                        return {
                            totalCount: 0 // 查询总条数
                        }
                    },
                    template: '<div class="searchList"><slot name="strict"></slot><ol><li v-for="item in grid | filterBy kw in params.fieldName" @click="change( $index, item )" v-html=\'(typeof item==="string" ? item : item[ params.fieldName]).replace( kw, "<span class=kw>"+kw+"</span>" )\'></li></ol><p class="listCount">一共<var>{{ totalCount }}</var>条记录</p></div>'
                }
            }
        })
    
    
    module.exports = searchList;
});